<html ng-app="cookbookApp">
<head>
  <script src="../vendor/angular.js"></script>
  <script src="application.js"></script>
</head>
<body>
  <h2>Without dot</h2>
  <div ng-controller="ParentController">
    Parent: <input type="text" ng-model="name" placeholder="name">

    <div ng-controller="ChildController">
      Child: <input type="text" ng-model="name" placeholder="name">
    </div>
  </div>

  <h2>With dot</h2>
  <div ng-controller="ParentController">
    Parent: <input type="text"
                   ng-model="person.name" placeholder="person.name">

    <div ng-controller="ChildController">
      Child: <input type="text"
                    ng-model="person.name" placeholder="person.name">
    </div>
  </div>

  <h2>Without dot (workaround)</h2>
  <div ng-controller="ParentController">
    Parent: <input type="text" ng-model="name" placeholder="name">

    <div ng-controller="ChildController">
      Child: <input type="text"
                    ng-model="$parent.name" placeholder="$parent.name">
    </div>
  </div>
</body>
</html>